<template>
  <div class="nav">
    <div class="top"><create-exam-bar></create-exam-bar></div>
    <aside class="aside">
      <div class="one" style="margin-top: 30px;" @click="dateClick">
        <div class="two" :class="{active:oneShow}"><i class="el-icon-s-marketing" style="font-size: 30px;"></i></div>
        <div>数据概况</div>
      </div>
      <div class="one" @click="tongClick">
        <div class="two" :class="{active:twoShow}"><i class="el-icon-s-data" style="font-size: 30px"></i></div>
        <div>统计报表</div>
      </div>
      <div class="one" @click="detailClick">
        <div class="two" :class="{active:threeShow}"><i class="el-icon-s-order" style="font-size: 30px"></i></div>
        <div>数据详情</div>
      </div>
    </aside>
    <div class="main" v-if="show === 1">
      <date-gene :msg="current"></date-gene>
    </div>
    <div class="main" v-if="show === 2">
      <statis-form :msg="current"></statis-form>
    </div>
    <div class="main" v-if="show === 3">
      <date-detail :msg="current"></date-detail>
    </div>
<!--    </div>-->
<!--    <div v-else>-->
<!--      <div class="main" v-if="show === 1">-->
<!--        <loading></loading>-->
<!--      </div>-->
<!--      <div class="main" v-if="show === 2">-->
<!--        <loading></loading>-->
<!--      </div>-->
<!--      <div class="main" v-if="show === 3">-->
<!--        <loading></loading>-->
<!--      </div>-->
<!--    </div>-->

  </div>
</template>

<script>
import CreateExamBar from "@/components/navigation/CreateExamBar";
import DateGene from "@/views/DataReport/DataReportChildren/DateGene";
import StatisForm from "@/views/DataReport/DataReportChildren/StatisForm";
import DateDetail from "@/views/DataReport/DataReportChildren/DateDetail";
import Loading from "@/views/DataReport/DataReportChildren/Loading";

export default {
  name: "DataReport",
  components: {
    CreateExamBar,
    DateGene,
    StatisForm,
    DateDetail,
    // Loading
  },
  data() {
    return {
      // showReport: true,

      show: 1,
      oneShow: false,
      twoShow: false,
      threeShow: false,

      current:[{
        currentTitle: '',
      },{
        currentExam: '',
      },{
        reportDate: '',
      }],

    }
  },
  computed: {
    getCurrentExam(){
      return this.$store.state.currentExam;
    },
    getCurrentTitle(){
      return this.$store.state.currentTitle
    },
    getReport(){
      return this.$store.state.reportDate
    },
    // getShowReport(){
    //   return this.$store.state.showReport
    // }
  },
  watch: {
    getCurrentExam() {
      this.current.currentExam = this.$store.state.currentExam.currentExam;
    },
    getCurrentTitle(){
      this.current.currentTitle = this.$store.state.currentTitle.currentTitle;
    },
    getReport(){
      this.current.reportDate = this.$store.state.reportDate.reportDate;
    },
    // getShowReport(){
    //   this.showReport = this.$store.state.showReport.showReport;
    // }
  },
  created() {
    localStorage.getItem("testMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("testMsg"))));
    window.addEventListener("beforeunload",()=>{
      localStorage.setItem("testMsg",JSON.stringify(this.$store.state))
    })
  },
  // created() {
  //   //在页面加载时读取localStorage里的状态信息
  //   if (sessionStorage.getItem("testMsg") ) {
  //     this.$store.replaceState(Object.assign({},
  //         this.$store.state,JSON.parse(sessionStorage.getItem("testMsg"))))
  //   }
  //   sessionStorage.removeItem("key"); //删除数据
  //   //在页面刷新时将vuex里的信息保存到localStorage里
  //   window.addEventListener("beforeunload",()=>{
  //     sessionStorage.setItem("testMsg",JSON.stringify(this.$store.state))
  //   })
  // },
  methods: {
    dateClick(){
      this.show = 1;
      this.oneShow = true;
      this.twoShow = false;
      this.threeShow = false;
    },
    tongClick(){
      this.show = 2;
      this.oneShow = false;
      this.twoShow = true;
      this.threeShow = false;
    },
    detailClick(){
      this.show = 3;
      this.oneShow = false;
      this.twoShow = false;
      this.threeShow = true;
    },

  },

}
</script>

<style scoped>
.nav {
  position: relative;
}
.nav .top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 2;
}
.nav .aside {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 60px;
  left: 0;
  width: 90px;
  height: 100%;
  background-color: white;
  color: #484848;
  font-size: 13px;
}
.nav .aside .one {
  width: 100%;
  height: 70px;
  margin-top: 15px;
  text-align: center;
  cursor: pointer;
  /*background-color: #D6B3E3;*/
}
.nav .aside .one .two {
  width: 40px;
  height: 35px;
  margin-bottom: 5px;
  margin-left: 24px;
}
.nav .aside .one .two:hover {
  background-color: #B3C0D1;
}
.active {
  background-color: #B3C0D1;
}
.nav .main {
  width: 1389px;
  /*height: 100%;*/
  position: absolute;
  top: 60px;
  left: 90px;
  background-color: #F7F8FA;
  padding: 20px 20px 60px;
}


</style>
